<template>
  <div class="register-home">
    <el-button class="login-button" @click="switchToLogin">Login</el-button>
    <div class="logo"><h1>R</h1></div>
    <h1 class="wbc-gin">Welcome! Please create an account to join us.</h1>
    <el-form
      class="input-form"
      :model="registerForm"
      :rules="rules"
      ref="registerForm"
      @submit.native.prevent="handleRegister"
    >
      <el-form-item prop="username">
        <el-input
          placeholder="Username"
          v-model="registerForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="Password"
          show-password
          v-model="registerForm.password"
        ></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input
          placeholder="Email"
          v-model="registerForm.email"
          prop="email"
        ></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          placeholder="Phone Number"
          v-model="registerForm.phone"
          prop="phone"
        ></el-input>
      </el-form-item>

      <el-button
        class="register-button"
        type="primary"
        native-type="submit"
        :loading="loading"
        >Register</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { register_api } from "@/api/user";

export default {
  name: "RegisterHome", // 定义了组件的名称为"RegisterHome",这个名称主要用于调试和Vue DevTools中显示。
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        email: "",
        phone: "",
      },
      loading: false, // 控制按钮的loading状态，用的属性，必须在data()里声明好。
      rules: {
        username: [
          { required: true, message: "please input username", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]{3,16}$/,
            message:
              "username must be 3-16 characters: letters, numbers, _or -",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "please input password", trigger: "blur" },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/,
            message: "password must be 6-20 characters: letters and numbers",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "please input email", trigger: "blur" },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "email must be like: xxx@xxx.xxx,",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "please input phone number",
            trigger: "blur",
          },
          {
            pattern: /^\d{11}$/,
            message: "phone number must be 11 digits: 13012345678",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    switchToLogin() {
      console.log("thisVue组件实例对象", this);
      this.$emit("switch-to-login");
    },

    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          console.log("走到这里了", valid);
          this.submitRegister();
        } else {
          return false;
        }
      });
    },

    async submitRegister() {
      this.loading = true;
      try {
        const response = await register_api(this.registerForm);
        this.$message.success("Registration success!");
        console.log("Registration response", response);
        this.$emit("register-success");
        Object.assign(this.registerForm, {
          username: "",
          password: "",
          email: "",
          phone: "",
        });
      } catch (error) {
        console.error("Registration error", error);
        this.$message.error(error.message || "Registration failed");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-button {
  position: absolute; // 绝对定位
  top: 40px; // 距离顶部40px
  right: 50px; // 距离右边50px
  border: none; // 去掉边框
  font-weight: 700; // 加粗
  color: #222; // 字体颜色
}

.logo {
  font-size: 50px; // 字体大小
}

.wbc-gin {
  font-size: 30px; // 字体大小
}

.input-form {
  width: 350px; // 宽度
}

.register-button {
  width: 350px; // 宽度
  margin-top: 20px; // 上边距
}
</style>
